@for $i from 1 through 19 {
  .font-#{9 + $i} {
    font-size: 9 + $i + px !important;
    line-height: 9 + $i + px;
  }
  .ma-#{-1 + $i} {
    margin: ($i - 1) * 4 + px !important;
  }
  .mt-#{-1 + $i} {
    margin-top: ($i - 1) * 4 + px !important;
  }
  .mr-#{-1 + $i} {
    margin-right: ($i - 1) * 4 + px !important;
  }
  .ml-#{-1 + $i} {
    margin-left: ($i - 1) * 4 + px !important;
  }
  .mb-#{-1 + $i} {
    margin-bottom: ($i - 1) * 4 + px !important;
  }
  .mx-#{-1 + $i} {
    margin: 0 ($i - 1) * 4 + px !important;
  }
  .my-#{-1 + $i} {
    margin: ($i - 1) * 4 + px 0 !important;
  }
  .pa-#{-1 + $i} {
    padding: ($i - 1) * 4 + px !important;
  }
  .px-#{-1 + $i} {
    padding: 0 ($i - 1) * 4 + px !important;
  }
  .py-#{-1 + $i} {
    padding: ($i - 1) * 4 + px 0 !important;
  }
  .pt-#{-1 + $i} {
    padding-top: ($i - 1) * 4 + px !important;
  }
  .pl-#{-1 + $i} {
    padding-left: ($i - 1) * 4 + px !important;
  }
  .pr-#{-1 + $i} {
    padding-right: ($i - 1) * 4 + px !important;
  }
  .pb-#{-1 + $i} {
    padding-bottom: ($i - 1) * 4 + px !important;
  }
}

@for $i from 1 through 3 {
  .flex-#{$i} {
    flex: $i !important;
  }

  .line-#{$i} {
    @include num-wrap($i);
  }
  .font-#{400 + $i*100} {
    font-weight: 400 + $i * 100 !important;
  }
}
